<style>
        .sub{
            padding-left: 0;
        }
        .api-item{
            width:11.5%;
            height:56px;
            padding: 3px 0; 
            margin: 5px 0.5%;
            background-color:#444;
            color: #fff;
            text-align: center;
            cursor: pointer;
            position: relative;
            top:0;
            left:0;
            float: left;
            transition: all .3s linear;
            box-shadow: 0 0 5px 5px #fff;
            border-radius: 0px;
        }
        .api-item:hover{
            top:-8px;
            left:-8px;
            background-color: #222;
            box-shadow: 5px 5px 5px 5px #bbb;
            border-radius: 5px;
        }
        .api-title{
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .api-intro{
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        @media screen and (max-width: 600px) {
            .api-item{
                width: 48%;
                margin: 5px 1%;
            }
        }
    </style>
    <div class='title'>api目录</div>
    <div class='sub' j='data'>
        <div j='$each'>
            <div class='title'><span j='$index'>$+1</span>.<span j='name'></span></div>
            <div class='text clearfix' j='api'>
                <div j='$each' class='api-item' jon='jump'>
                    <div class='api-title' jattr='title:{{$.name}}' j='name'></div>
                    <div class='api-intro' jattr='title:{{$.intro}}' j='intro'></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Jet({
            name:'api',
            onmounted:function(){
                var keys=[
                    {url:'/intro',text:'介绍'},
                    {url:'/bind',text:'数据绑定'},
                    {url:'/attr',text:'属性样式事件'},
                    {url:'/valid',text:'表单验证'},
                    {url:'/lang',text:'国际化语言'},
                    {url:'/router',text:'路由'},
                    {url:'/module',text:'js模块规范'},
                    {url:'/css',text:'css配置文件'},
                    {url:'/tool',text:'工具方法介绍'},
                    {url:'/jui',text:'JUI'},
                    {url:'/code',text:'在线使用'}
                ];
                var data=this.$get('Query').getData();
                var _d=[];
                keys.forEach(function(key){
                    var res=data.filter(function(item){
                        return item.url.substring(0,key.url.length)==key.url;
                    })
                    _d.push({
                        name:key.text,
                        api:res
                    });

                });
                this.data=_d;
            },
            data:{
                data:[]
            },
            func:{
                jump:function(opt){
                    Jet.comp.header.toQueryResult(opt)
                }
            }
        })
    </script>